import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  // el：指令所绑定的元素，可以用来直接操作 DOM。
  // binding：一个对象，包含以下 property：
  //  name：指令名，不包括 v- 前缀。
  //  value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  //  oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  //  expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  //  arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  //  modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

  // eslint-disable-next-line space-before-function-paren
  mounted(el, binding) {
    // 图片懒加载的逻辑：
    //  1. 给图片一个默认占位图，初始显示它（优化）
    el.src = defaultImg
    //  2. 监听图片 el 是否处于可见区域，如可见，将图片url数据binding.value赋值给给 el 的src属性来加载图片
    // console.log('imgLazy', el, binding.value)
    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
      // console.log(el, isIntersecting, stop)
      if (isIntersecting) { // 图片从不可见 ---> 可见
        // 1. 停止监听
        stop()
        // 2. 设置src
        el.src = binding.value
      }
    }, { threshold: 0.1 })
  }
}
